<template>
    <div id="home">
        <div id="wrapper">
            <div class="mobile">
                <!-- Checkbox to toggle the menu -->
                <input type="checkbox" id="tm"/>
                <input type="checkbox" id="right"/>
                <!-- The menu -->
                <div class="sidenav">
                    <el-row class="tac">
                        <el-col :span="24">
                            <el-menu default-active="1" unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                                <div class="home_first">
                                    <el-menu-item class="home_first" index="1"><i class="el-icon-star-on"></i>主页</el-menu-item>
                                </div>
                                <el-submenu index="2">
                                    <template slot="title"><i class="el-icon-information"></i>关于我们</template>
                                    <el-menu-item-group>
                                        <template slot="title"></template>
                                        <el-menu-item index="1-1">- 公司介绍</el-menu-item>
                                        <el-menu-item index="1-2">- 经纪人公约</el-menu-item>
                                        <el-menu-item index="1-3">- 服务条款</el-menu-item>
                                        <el-menu-item index="1-4">- 隐私条款</el-menu-item>
                                        <el-menu-item index="1-5">- 商务合作</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-menu-item index="3"><i class="el-icon-document"></i>企业贷款</el-menu-item>
                                <el-submenu index="4">
                                    <template slot="title"><i class="el-icon-edit"></i>个人贷款</template>
                                    <el-menu-item-group>
                                        <template slot="title"></template>
                                        <el-menu-item index="1-1">- 消费贷款</el-menu-item>
                                        <el-menu-item index="1-2">- 经营贷款</el-menu-item>
                                        <el-menu-item index="1-3">- 购房贷款</el-menu-item>
                                        <el-menu-item index="1-4">- 购车贷款</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-menu-item index="5"><i class="el-icon-date"></i>信用卡</el-menu-item>

                                <el-menu-item index="6"><i class="el-icon-warning"></i>咨询</el-menu-item>

                                <el-menu-item index="7"><i class="el-icon-message"></i>联系我们</el-menu-item>
                            </el-menu>
                        </el-col>
                        <el-col :span="23" :offset="1">

                        </el-col>
                    </el-row>
                </div>
                <ul class="sideright">
                    <li><a href="#"><b>Tasks</b></a></li>
                    <li><a href="#"><b>Messages</b></a></li>
                    <li><a href="#"><b>New Post</b></a></li>
                    <li><a href="#"><b>Settings</b></a></li>
                    <li><a href="#"><b>Starred</b></a></li>
                    <li><a href="#"><b>Logout</b></a></li>
                </ul>
                <!-- Content area -->
                <section>
                    <div class="home_header">
                        <el-row>
                            <el-col :span="7">
                                <div>
                                    <label for="tm">
                                        <i class="el-icon-setting"></i>
                                    </label>
                                </div>
                            </el-col>
                            <el-col :span="10">
                                <div class="text-center">
                                    协贷网-北京
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div class="text-right">
                                    <label for="right">
                                        <i class="el-icon-menu"></i>
                                    </label>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="24">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img src="public/images/index/banner.png" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="public/images/index/banner.png" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="public/images/index/banner.png" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="public/images/index/banner.png" alt="">
                                        </div>
                                    </div>
                                    <div class="swiper-pagination"></div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22" :offset="1">
                                <div class="home_content">
                                    <!--<div class="home_search">
                                        <el-row>
                                            <el-col :span="24">
                                                <el-input
                                                        placeholder="搜索相关业务..."
                                                        v-model="input">
                                                </el-input>

                                            </el-col>
                                        </el-row>
                                    </div>-->
                                    <div class="home_details">
                                        <el-row>
                                            <el-col :span="12">
                                                <div class="home_details_main home_details_right home_details_bottom">
                                                    <img src="public/images/index/money.png">
                                                    <div>个人贷款</div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="home_details_main home_details_bottom">
                                                    <img src="public/images/index/money_more.png">
                                                    <div>企业贷款</div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="home_details_main home_details_right home_details_bottom">
                                                    <img src="public/images/index/money_pig.png">
                                                    <div>购房贷款</div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="home_details_main home_details_bottom">
                                                    <img src="public/images/index/money_little.png">
                                                    <div>购车贷款</div>
                                                </div>
                                            </el-col>
                                            <el-col :span="24">
                                                <div class="home_details_main">
                                                    <img src="public/images/index/money_list.png">
                                                    <div>银行产品</div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div class="home_select">
                                        <h1>
                                            我要贷款
                                        </h1>
                                        <el-row>
                                            <el-col :span="24">
                                                <div class="home_select_use">
                                                    <el-row>
                                                        <el-col :span="8">
                                                            <div>
                                                                贷款类型：
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="16">
                                                            <div>
                                                                <el-select v-model="value" placeholder="请选择贷款类型">
                                                                    <el-option
                                                                            v-for="item in loan_type"
                                                                            :label="item.label"
                                                                            :value="item.value">
                                                                    </el-option>
                                                                </el-select>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                                <div class="home_select_use">
                                                    <el-row>
                                                        <el-col :span="8">
                                                            <div>
                                                                贷款分类：
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="16">
                                                            <div>
                                                                <el-select v-model="value" placeholder="请选择贷款分类">
                                                                    <el-option
                                                                            v-for="item in loan_select"
                                                                            :label="item.label"
                                                                            :value="item.value">
                                                                    </el-option>
                                                                </el-select>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                                <div class="home_select_use">
                                                    <el-row>
                                                        <el-col :span="8">
                                                            <div>
                                                                贷款金额：
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="16">
                                                            <div>
                                                                <el-select v-model="value" placeholder="请选择贷款金额">
                                                                    <el-option
                                                                            v-for="item in loan_money"
                                                                            :label="item.label"
                                                                            :value="item.value">
                                                                    </el-option>
                                                                </el-select>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                                <div class="home_select_use">
                                                    <el-row>
                                                        <el-col :span="8">
                                                            <div>
                                                                贷款期限：
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="16">
                                                            <div>
                                                                <el-select v-model="value" placeholder="请选择贷款期限">
                                                                    <el-option
                                                                            v-for="item in loan_date"
                                                                            :label="item.label"
                                                                            :value="item.value">
                                                                    </el-option>
                                                                </el-select>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                                <div class="home_select_use">
                                                    <el-row>
                                                        <el-col :span="8">
                                                            <div>
                                                                职业身份：
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="16">
                                                            <div>
                                                                <el-select v-model="value" placeholder="请选择职业身份">
                                                                    <el-option
                                                                            v-for="item in loan_main"
                                                                            :label="item.label"
                                                                            :value="item.value">
                                                                    </el-option>
                                                                </el-select>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                                <div class="home_select_button">
                                                    <el-row>
                                                        <el-col :span="24">
                                                            <div>
                                                                <el-button type="success">立即申请</el-button>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </section>
            </div>
        </div>
    </div>
</template>

<script>
  import '../../javascript/main.js';
  import "../../../public/css/main.less";
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.css';
  export default {
    data() {
      return {
        msg: 'Hello Vue!',
        loan_type: [{
          value: '1',
          label: '个人贷款'
        }, {
          value: '2',
          label: '企业贷款'
        }],
        loan_select: [{
          value: '1',
          label: '企业贷款'
        }, {
          value: '2',
          label: '消费贷款'
        },{
          value: '3',
          label: '经营贷款'
        }, {
          value: '4',
          label: '购房贷款'
        },{
          value: '5',
          label: '购车贷款'
        }, {
          value: '6',
          label: '质押贷款'
        }],
        loan_money: [{
          value: '1',
          label: '3万'
        }, {
          value: '2',
          label: '5万'
        },{
          value: '3',
          label: '10万'
        }, {
          value: '4',
          label: '15万'
        },{
          value: '5',
          label: '20万'
        }, {
          value: '6',
          label: '25万'
        },{
          value: '7',
          label: '30万'
        }, {
          value: '8',
          label: '50万'
        },{
          value: '9',
          label: '80万'
        }, {
          value: '10',
          label: '100万'
        },{
          value: '11',
          label: '200万'
        }, {
          value: '12',
          label: '300万'
        }, {
          value: '13',
          label: '500万'
        }],
        loan_date: [{
          value: '1',
          label: '18个月'
        }, {
          value: '2',
          label: '2年'
        },{
          value: '3',
          label: '3年'
        }, {
          value: '4',
          label: '5年'
        },{
          value: '5',
          label: '10年'
        }, {
          value: '6',
          label: '15年'
        },{
          value: '7',
          label: '20年'
        }, {
          value: '8',
          label: '25年'
        },{
          value: '9',
          label: '30年'
        }],
        loan_main: [{
          value: '1',
          label: '企业主'
        }, {
          value: '2',
          label: '个体户'
        },{
          value: '3',
          label: '上班族'
        }, {
          value: '4',
          label: '自由职业'
        },{
          value: '5',
          label: '不限'
        }],
        type: '',
        select:'',
        money:'',
        date:'',
        main:''
      };
    },
    mounted() {
      console.log('挂载好了');
      const mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        pagination: '.swiper-pagination'
      });
      console.log(mySwiper);
    }
  };




</script>
<style lang="less" rel="stylesheet/scss" type="text/css">
    input{
        font-family:"微软雅黑";
    }
    :-ms-input-placeholder {
        font-family:"微软雅黑";
    }
    :-webkit-input-placeholder {
        font-family:"微软雅黑";
    }
    button{
        font-family:"微软雅黑";
    }
    #home .home_first:nth-child(1){
        border-bottom:0.5px solid #20a0ff;
    }
</style>
<style scoped lang="less" rel="stylesheet/scss" type="text/css">
    .swiper-container {
        height: 30vh;
        img {
            width: 100%;
            height: 30vh;
        }
    }

    #home {
        width: 100vw;
    }

    .home_header {
        padding: 2vw;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 20px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
        z-index: 10;
        width: 100vw;
        color: #fff;
    }

    #wrapper {
        /*width: 645px;*/
        /*height: 5 00px;*/
        /*margin: 35px auto 50px auto;*/
    }

    .mobile {
        float: left;
        position: relative;
        box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }

    /*Hiding the checkbox*/
    #tm,#right {
        display: none;
    }

    /*Content area*/
    .mobile section {
        width: 100vw;
        height: 150vh;
        position: relative;
        background-color: #f5f5f5;
        transition: all 0.25s;
        z-index:10;
        color:rgba(0,0,0,.8);
    }

    /*Nav styles*/
    .sidenav {
        background: #eff2f7;
        width: 70vw;
        height:100vh;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        padding-top: 10vh;
        z-index:1;
    }

    /*.sidenav li {
        list-style-type: none;
    }*/

    .sidenav a {
        color: white;
        text-decoration: none;
    }

    .sidenav b {
        font: bold 12px/48px Montserrat;
        display: block;
        opacity: 0;
        transform: translateX(50px);
        transition: all 0.4s;
    }

    /*.sidenav i {
        display: block;
        width: 50px;
        float: left;
        font-size: 16px;
        line-height: 48px;
        text-align: center;
    }*/
    .sideright {
        background: #eff2f7;
        width: 70vw;
        height:100vh;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        padding-top: 100px;
        z-index:1;
    }

    .sideright li {
        list-style-type: none;
    }

    .sideright a {
        color: white;
        text-decoration: none;
    }

    .sideright b {
        font: bold 12px/48px Montserrat;
        display: block;
        opacity: 0;
        transform: translateX(50px);
        transition: all 0.4s;
    }

    .sideright i {
        display: block;
        width: 50px;
        float: left;
        font-size: 16px;
        line-height: 48px;
        text-align: center;
    }

    /*Animation controls using checkbox hack*/
    /*Animate content area to the right*/
    #tm:checked ~ section {
        transform: translateX(70vw);
    }

    #right:checked ~ section {
        transform: translateX(-70vw);
    }

    /*Animate links from right to left + fade in effect*/
    #tm:checked ~ .sidenav b {
        opacity: 1;
        transform: translateX(0);
    }
    #tm:checked ~ .sidenav {
        z-index: 5;
    }
    #right:checked ~ .sideright b {
        opacity: 1;
        transform: translateX(0);
    }
    #right:checked ~ .sideright {
        z-index: 5;
    }

    /*Adding delay to link animation - in multiples of .08s*/
    /*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/
    #tm:checked ~ .sidenav li:nth-child(1) b {
        transition-delay: 0.08s;
    }

    #tm:checked ~ .sidenav li:nth-child(2) b {
        transition-delay: 0.16s;
    }

    #tm:checked ~ .sidenav li:nth-child(3) b {
        transition-delay: 0.24s;
    }

    #tm:checked ~ .sidenav li:nth-child(4) b {
        transition-delay: 0.32s;
    }

    #tm:checked ~ .sidenav li:nth-child(5) b {
        transition-delay: 0.40s;
    }

    #tm:checked ~ .sidenav li:nth-child(6) b {
        transition-delay: 0.48s;
    }



    #right:checked ~ .sideright li:nth-child(1) b {
        transition-delay: 0.08s;
    }

    #right:checked ~ .sideright li:nth-child(2) b {
        transition-delay: 0.16s;
    }

    #right:checked ~ .sideright li:nth-child(3) b {
        transition-delay: 0.24s;
    }

    #right:checked ~ .sideright li:nth-child(4) b {
        transition-delay: 0.32s;
    }

    #right:checked ~ .sideright li:nth-child(5) b {
        transition-delay: 0.40s;
    }

    #right:checked ~ .sideright li:nth-child(6) b {
        transition-delay: 0.48s;
    }
    .home_search{
        margin-top: 2vh;
        input{
            font-family:"微软雅黑";
        }
    }
    .home_details{
        margin-top:2vh;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
        border:1px solid #ccc;
        &_main{
            padding:2vw;
            text-align: center;
            img{
                width:10vw;
                height:auto;
            }
        }
        &_bottom{
            border-bottom:1px solid #ccc;
        }
        &_right{
            border-right:1px solid #ccc;
        }
    }
    .home_select{
        margin-top: 2vh;
        h1{
            font-size:6vw;
            text-align: center;
        }
        &_use{
            /*color:#1c76aa;*/
            margin-top:3vh;
            line-height:5vh;
            padding:2vw;
            background: #fff;
            text-align: center;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius:10px;
        }
        &_button{
            margin-top:3vh;
            line-height:5vh;
            padding:2vw;
            /*background: #fff;*/
            text-align: center;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius:10px;
            button{
                display: block;
                width:100%;
            }
        }
    }
</style>
